<template>
  <div class="prize-check">
    <h1 class="common-tit">文章列表</h1>
    <div class="search-box">
      <el-row :gutter="10">
        <el-form ref="reqDataForm" :model="reqDataForm" label-width="70px" :inline="true">
          <!-- <el-col :xs="24" :sm="12" :md="8" :lg="8" :xl="8">
            <el-form-item label="用户ID" prop="imei">
              <el-input v-model="reqDataForm.imei" class="input-box" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" ::xl="8">
            <el-form-item label="中奖ID" prop="awardId">
              <el-input v-model="reqDataForm.awardId" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" ::xl="8">
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="reqDataForm.phone" style="width: 100%;"></el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" ::xl="8">
            <el-form-item label="中将时间" prop="awardDate">
              <el-date-picker type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
                              value-format="yyyy-MM-dd" v-model="reqDataForm.awardDate" style="width: 100%;"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" ::xl="8">
            <el-form-item label="中奖物品"  prop="category">
              <el-select v-model="reqDataForm.category" placeholder="请选择中奖物品" style="width: 100%;">
                <el-option
                  v-for="item in categoryArr"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="8" :lg="8" ::xl="8">
            <el-form-item label="领奖状态" prop="status">
              <el-select v-model="reqDataForm.status" placeholder="请选择领奖状态" style="width: 100%;">
                <el-option
                  v-for="item in statusArr"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm('reqDataForm')">查询</el-button>
            <el-button type="info" @click="resetForm('reqDataForm')">重置</el-button>
            <el-button type="success" @click="doAddArticle">新增文章</el-button>
          </el-form-item>
        </el-form>
      </el-row>

    </div>
    <div class="content-wrapper table-responsive" v-if="prizeListData.length > 0">
      <el-table

        ref="multipleTable"
        v-loading="loadingArticleListTable"
        element-loading-text="拼命加载中"
        :data="prizeListData"
        border
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        height="580">
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="imei"
          label="用户ID(IMEI)"
          width="150">
        </el-table-column>
        <el-table-column
          prop="awardId"
          label="中奖ID"
          width="120">
        </el-table-column>
        <el-table-column
          prop="awardDate"
          label="中奖时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="city"
          label="中奖物品"
          width="180">
          <template slot-scope="scope">{{ [scope.row.category, scope.row.number] | getPrizeShow }}</template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="领奖状态"
          width="120">
          <template slot-scope="scope">{{statusArrStr[scope.row.status] }}</template>
        </el-table-column>
        <el-table-column
          prop="awardFinishDate"
          label="领奖时间"
          width="160">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="120">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号码"
          width="120">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button v-if="scope.row.status == 1 || scope.row.status == 2"  @click="doEditPrizeStatus(scope.$index, scope.row.awardId)" type="primary" size="mini">领奖</el-button>
            <el-button :disabled="true" v-if="scope.row.status == 3" type="text" size="mini">已领奖</el-button>
            <el-button v-if="scope.row.status == 4" type="text" size="mini">已失效</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="data-empty" v-else-if="(prizeListData.length <= 0 && reqDataForm.pageIndex == 0) " style="width: 100%">{{showMsg}}</div>

    <div class="pagination-box" v-if="prizeListData.length > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 30, 50, 100, 200, 500, 800]"
        :page-size="10"
        :small="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNumber">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'prize-check',
    components: {
    },
    beforeRouteEnter (to, from, next) {
      next(function (vm) {
//        vm.doGetAwardList()
      })
    },
    data () {
      return {
        paramData: '',
        currentPage: 1,
        showMsg: '',
        statusArrStr: ['未领奖', '未领奖', '领奖中', '已领奖', '已失效'],
        statusArr: [{
          value: '',
          title: '全部'
        }, {
          value: 1,
          title: '未领奖'
        }, {
          value: 2,
          title: '领奖中'
        }, {
          value: 3,
          title: '已领奖'
        }, {
          value: 4,
          title: '已失效'
        }],
        categoryArr: [{
          value: '',
          title: '全部'
        }, {
          value: 2,
          title: '虚拟点数'
        }, {
          value: 3,
          title: '实物门票'
        }, {
          value: 4,
          title: '实物手机'
        }],
        loadingArticleListTable: true,
        currentPageNumber: 1,
        totalNumber: 0,
        layoutStatus: 1,
        layoutStrAll: 'sizes, prev, pager, next',
        reqDataForm: {
          totalPages: 0,
          totalRecord: 0,
          phone: '',
          awardDate: '',
          category: '',
          status: '',
          pageIndex: 0,
          pageSize: 10
        },
        prizeListData: []
      }
    },
    methods: {
      doGetAwardList () {
        let that = this
        that.reqDataForm.pageIndex = that.currentPage - 1
        let loadingInstance = this.$loading.service()
        this.Api.getAwardList(that.reqDataForm.imei, that.reqDataForm.awardId, that.reqDataForm.phone, that.reqDataForm.awardDate, that.reqDataForm.category, that.reqDataForm.status, that.reqDataForm.pageIndex, that.reqDataForm.pageSize).then((res) => {
          return this.Api.checkResponse(res)
        }).then(data => {
          loadingInstance.close()
          that.totalNumber = data.dataTotal
          that.paramData = data.paramData || ''
          if (data.dataList.length > 0) {
            that.prizeListData = data.dataList
          } else {
            that.prizeListData = []
            that.showMsg = '暂无数据'
          }
          that.loadingArticleListTable = false
        }).catch(error => {
          loadingInstance.close()
          this.Api.handleError(error)
        })
      },
      doEditPrizeStatus (idx, awardId) {
        let that = this
        this.$confirm('确认修改领奖状态?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.Api.editPrizeStatus(awardId).then((res) => {
            return this.Api.checkResponse(res)
          }).then(data => {
            that.prizeListData[idx].status = 3
          }).catch(error => {
            this.Api.handleError(error)
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消修改'
          })
        })
      },
      submitForm (formName) {
        let that = this
        this.$refs[formName].validate((valid) => {
          that.doGetAwardList()
        })
      },
      resetForm (formName) {
        let that = this
        this.$confirm('此操作将重置所填信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$refs[formName].resetFields()
          that.currentPage = 1
          that.doGetAwardList()
          this.$message({
            type: 'success',
            message: '重置成功!'
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消重置'
          })
        })
      },
      handleSizeChange (val) {
        let that = this
        that.reqDataForm.pageSize = val
        that.doGetAwardList()
      },
      handleCurrentChange (val) {
        let that = this
        that.currentPage = val
        that.doGetAwardList()
      },
      doAddArticle () {
        this.$router.push('/article-management/article-add')
      }
    },
    mounted () {
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped="scoped" type="text/css">
  .type-status{
  &.yes{ color: #008000;}
  &.no{ color: #f00;}
  }
  .pagination-box{
    text-align: center;
  }
  .data-empty{
    text-align: center;
    font-size: 18px;
    color: red;
  }
</style>
